<template>
  <el-form :model="state.bankCardForm" :rules="rules" ref="ruleFormRef">
    <el-form-item prop="card_number">
      <el-input
        v-model="state.bankCardForm.card_number"
        :placeholder="$t('VA-请输入银行账号')"
        type="number"
      />
    </el-form-item>
    <el-form-item prop="bank_country">
      <el-select
        v-model="state.bankCardForm.bank_country"
        :placeholder="$t('VA-请选择银行所在国家')"
        style="width: 100%"
      >
        <el-option
          v-for="item in state.countryList"
          :key="item.jc"
          :label="item.country"
          :value="item.jc"
        />
      </el-select>
    </el-form-item>
    <el-form-item prop="bank_name">
      <el-input
        v-model="state.bankCardForm.bank_name"
        :placeholder="$t('VA-请输入银行名称')"
      />
    </el-form-item>
    <el-form-item prop="bank_address">
      <el-input
        v-model="state.bankCardForm.bank_address"
        :placeholder="$t('VA-请输入银行地址')"
      />
    </el-form-item>
    <el-form-item prop="card_name">
      <el-input
        v-model="state.bankCardForm.card_name"
        :placeholder="$t('VA-请输入持卡人姓名')"
      />
    </el-form-item>
    <el-form-item prop="card_country">
      <el-select
        v-model="state.bankCardForm.card_country"
        :placeholder="$t('VA-请选择持卡人国家')"
        style="width: 100%"
      >
        <el-option
          v-for="item in state.countryList"
          :key="item.jc"
          :label="item.country"
          :value="item.jc"
        />
      </el-select>
    </el-form-item>
    <el-form-item prop="card_address">
      <el-input
        v-model="state.bankCardForm.card_address"
        :placeholder="$t('VA-请输入持卡人地址')"
      />
    </el-form-item>
    <el-form-item prop="currency">
      <el-select
        v-model="state.bankCardForm.currency"
        :placeholder="$t('VA-请选择银行账号币种')"
        style="width: 100%"
      >
        <el-option
          v-for="item in state.currencyList"
          :key="item.id"
          :label="item.name"
          :value="item.name"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <div class="flex items-center justify-center w-full">
        <el-button
          :plain="true"
          class="plainButton"
          type="primary"
          @click="onSubmit(ruleFormRef)"
          style="width: 120px"
          >{{ $t("提交") }}</el-button
        >
      </div>
    </el-form-item>
  </el-form>
</template>
<script setup>
import { ref, reactive } from "vue";
import {
  GetPhoneAreaCode,
  GetVaBankCurrency,
  addVABankCard,
} from "@/api/VAAccount";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const props = defineProps({
  isShowAdd: {
    type: Boolean,
    default: false,
  },
});
const state = reactive({
  bankCardForm: {
    card_number: "",
    bank_country: "",
    bank_name: "",
    bank_address: "",
    card_name: "",
    card_country: "",
    card_address: "",
    currency: "",
  },
  countryList: [],
});

const emit = defineEmits(["closeAddUser"]);

const rules = reactive({
  card_number: [
    {
      required: true,
      message: t("VA-请输入银行账号"),
      trigger: "change",
    },
  ],
  bank_country: [
    {
      required: true,
      message: t("VA-请选择银行所在国家"),
      trigger: "change",
    },
  ],
  bank_name: [
    {
      required: true,
      message: t("VA-请输入银行名称"),
      trigger: "change",
    },
  ],
  card_name: [
    {
      required: true,
      message: t("VA-请输入持卡人姓名"),
      trigger: "change",
    },
  ],
  bank_address: [
    {
      required: true,
      message: t("VA-请输入银行地址"),
      trigger: "change",
    },
  ],
  card_address: [
    {
      required: true,
      message: t("VA-请输入持卡人地址"),
      trigger: "change",
    },
  ],
  card_country: [
    {
      required: true,
      message: t("VA-请选择持卡人国家"),
      trigger: "change",
    },
  ],
  currency: [
    {
      required: true,
      message: t("VA-请选择银行账号币种"),
      trigger: "change",
    },
  ],
});

const ruleFormRef = ref();

const onSubmit = (formRef) => {
  console.log(formRef);
  formRef.validate(async (valid, fields) => {
    if (valid) {
      try {
        const data = { ...state.bankCardForm, id: history.state.id };
        addVABankCard(data).then((res) => {
          ElMessage({
            message: t("添加成功"),
            type: "success",
          });
          emit("closeAddUser", res.id);
        });
      } catch {
        state.bankCardForm = {};
      }
    }
  });
};

const getPhoneAreaCode = async () => {
  try {
    const data = await GetPhoneAreaCode();
    state.countryList = data || [];
  } catch {}
};

const getVaBankCurrency = async () => {
  try {
    const data = await GetVaBankCurrency();
    state.currencyList = data || [];
  } catch {}
};

if (props.isShowAdd) {
  getPhoneAreaCode();
  getVaBankCurrency();
}
</script>
